<template>
  <div class="goods-container" v-loading="showGlobalLoading">
    <bread-crumb :breadInfoList="breadInfoList"></bread-crumb>
    <common-card>
      <div slot="card-info">
        <el-row>
          <el-col :span="5">
            <el-input
              placeholder="请输入分类名称"
              v-model="filterText"
              size="mini"
              prefix-icon="el-icon-search"
            ></el-input>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-plus"
              style="margin-top:20px;"
              @click="addNewClassification({},'add')"
            >新建一级分类</el-button>
            <common-card :title="`当前分类：${currentNode['label']}`" style="margin-top:20px;">
              <div slot="card-info" v-loading="showLoading" class="card-content">
                <el-tree
                  :data="treeData"
                  :props="defaultProps"
                  ref="tree"
                  :filter-node-method="filterNode"
                  :render-content="renderContent"
                  @node-click="handleNodeClick"
                />
              </div>
            </common-card>
          </el-col>

          <el-col :span="18" :offset="1">
            <el-row>
              <common-card title="商品筛选">
                <div slot="card-info">
                  <normal-filter slot="card-info" :filterProps="filterProps" />
                  <el-divider></el-divider>
                  <el-button size="mini" type="success" icon="el-icon-plus">添加商品</el-button>
                  <el-button size="mini" type="primary" icon="el-icon-plus">批量上架</el-button>
                  <el-button size="mini" type="danger" icon="el-icon-minus">批量下架</el-button>
                  <div style="margin-top:20px;">
                    <common-table
                      :multiSelection="true"
                      :showHandle="false"
                      :columnProps="columnProps"
                      :tableData="tableData"
                      :pagination="pagination"
                    />
                  </div>
                </div>
              </common-card>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </common-card>
    <cateModal
      :modalVisible="visible"
      :modalData="formData"
      @saveCate="saveChange($event)"
      @close="closeModal($event)"
    />
  </div>
</template>
<script>
import commonCard from "@/components/commonCard";
import normalFilter from "@/components/normalFilter";
import commonTable from "@/components/commonTable";
import cateModal from "@/views/goodsCenter/cateModal";
import { Message } from "element-ui";
import breadCrumb from "@/components/commonBreadCrumb";
import { goodsColumnProps } from "@/utils/enums";
import Cate from "@/api/cate";
export default {
  data() {
    const filterProps = {
      filterItems: [
        {
          type: "input",
          id: "goodsName",
          title: "商品名称",
          placeholder: "请输入"
        },
        {
          type: "input",
          id: "skuId",
          title: "SKU编码"
        },
        {
          type: "input",
          id: "spuId",
          title: "SPU编码"
        },
        {
          type: "input",
          id: "materialId",
          title: "物料编码"
        }
      ],
      onFilterChange: value => {},
      reSet: () => {}
    };
    return {
      breadInfoList: ["商品中心", "商品管理"],
      filterProps,
      filterText: "",
      showLoading: false,
      showGlobalLoading: false,
      columnProps: goodsColumnProps,
      tableData: [],
      formData: {},
      visible: false,
      pagination: {
        totalElements: 0,
        pageIndex: 1,
        pageSize: 10
      },
      currentNode: {
        label: "",
        children: ""
      },
      treeData: [],
      // data: [
      //   {
      //     label: "一级 1",
      //     children: [
      //       {
      //         label: "二级 1-1",
      //         children: [
      //           {
      //             label: "三级 1-1-1"
      //           }
      //         ]
      //       }
      //     ]
      //   },
      //   {
      //     label: "一级 2",
      //     children: [
      //       {
      //         label: "二级 2-1",
      //         children: [
      //           {
      //             label: "三级 2-1-1"
      //           }
      //         ]
      //       },
      //       {
      //         label: "二级 2-2",
      //         children: [
      //           {
      //             label: "三级 2-2-1"
      //           }
      //         ]
      //       }
      //     ]
      //   },
      //   {
      //     label: "一级 3",
      //     children: [
      //       {
      //         label: "二级 3-1",
      //         children: [
      //           {
      //             label: "三级 3-1-1"
      //           }
      //         ]
      //       },
      //       {
      //         label: "二级 3-2",
      //         children: [
      //           {
      //             label: "三级 3-2-1"
      //           }
      //         ]
      //       }
      //     ]
      //   }
      // ],
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  async created() {
    console.log(this);
    this.showLoading = true;
    await this.getCateList();
    this.showLoading = false;
  },
  methods: {
    filterNode(value, data) {
      console.log(value);
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick({ name }) {
      this.currentNode["label"] = name;
    },
    renderContent(h, { node, data }) {
      return (
        <span class="custom-tree-node tree-node">
          <el-tooltip
            class="item"
            effect="dark"
            content={node.label}
            placement="top-start"
          >
            <span>{node.label}</span>
          </el-tooltip>
          <span class="icon-container">
            <el-tooltip
              class="item"
              effect="dark"
              content="添加分类"
              placement="top-start"
            >
              <el-button
                icon="el-icon-plus"
                size="mini"
                type="text"
                on-click={() => this.append(data)}
              ></el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="修改分类"
              placement="top-start"
            >
              <el-button
                icon="el-icon-edit"
                size="mini"
                type="text"
                on-click={() => this.addNewClassification(data,'update')}
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除分类"
              placement="top-start"
            >
              <el-button
                icon="el-icon-delete"
                size="mini"
                type="text"
                on-click={() => this.append(data)}
              ></el-button>
            </el-tooltip>
          </span>
        </span>
      );
    },
    //添加分类
    addNewClassification(data, type) {
      let { id, name } = data;
      data['type']=type
      this.formData = data;
      this.visible = true;
    },
    async getCateList() {
      let apiData = { limit: 5000, start: 0, order: "desc", sort: "creatTime" },
        data = await Cate.getCateList(apiData),
        treeData = [];
      console.log(data);
      data.forEach(item => {
        let treeNode = { name: item.name, children: [], id: item.id };
        treeData.unshift(treeNode);
      });
      this.treeData = treeData;
    },
    async saveChange(val) {
      
      let apiData = {name: val.name,pid: 0,sort: 1},
          queryParam={name:val.name,id:val.id},
          type=val.type,
          { success } = type==='add'?await Cate.addCate(apiData):await Cate.updateCate(queryParam);
      if (success) {
        Message.success(type==='add'?"添加成功":"更新成功");
        this.visible = false;
        this.showGlobalLoading = true;
        await this.getCateList();
        this.showGlobalLoading = false;
        this.formData = {};
      }
    },
    closeModal() {
      this.visible = false;
    }
  },
  components: {
    commonCard,
    commonTable,
    breadCrumb,
    normalFilter,
    cateModal
  }
};
</script>
<style lang='scss' scoped>
.goods-container {
  height: 90%;
  .card-content {
    max-height: 260px;
    overflow: auto;
    margin-left: -20px;
  }
  .card-content::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
  /deep/ .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    font-size: 14px;
    padding-right: 8px;
    overflow: auto;
    span:nth-child(1) {
      width: 60%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .icon-container {
      position: absolute;
      right: 0;
    }
  }
  /deep/ .el-row {
    text-align: left;
  }
}
</style>